<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="110px"
          class="demo-formModel"
        >
          <!-- 教师类别 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="教师类别" prop="t_type1">
                <el-row>
                  <el-col :span="5">
                    <el-select
                      v-model="formModel.t_type1"
                      placeholder="学历教师"
                      class="el_select"
                    >
                      <el-option label="学历教师" value="0"></el-option>
                      <el-option label="非学历教师" value="1"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <el-select
                      v-model="formModel.t_type2"
                      placeholder="普通教师"
                      class="el_select"
                    >
                      <el-option label="普通教师" value="0"></el-option>
                      <el-option label="兼职教师" value="1"></el-option>
                      <el-option label="外聘教师" value="2"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 证件照 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="证件照" prop="photo1">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="formModel.photo1" :src="formModel.photo1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生活照" >
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="formModel.photo2" :src="formModel.photo2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 姓名 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名" prop="username">
                <el-input v-model="formModel.username" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="formModel.sex"
                  placeholder="性别"
                  class="el_select"
                >
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="国籍/地区" prop="country">
                <el-select
                  v-model="formModel.country"
                  placeholder="国籍"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 出生日期 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  type="date"
                  placeholder="请选择出生日期"
                  v-model="formModel.birthday"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="籍贯" prop="native">
                <el-select
                  v-model="formModel.city"
                  placeholder="请选择籍贯"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生地" prop="address">
                <el-select
                  v-model="formModel.address"
                  placeholder="请选择出生地"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 名族 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="名族" prop="famous">
                <el-select
                  v-model="formModel.famous"
                  placeholder="请选择名族"
                  class="el_select"
                >
                  <el-option
                    v-for="item in famousList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="political">
                <el-select
                  v-model="formModel.political"
                  placeholder="请选择政治面貌"
                  class="el_select"
                >
                  <el-option
                    v-for="item in politicalList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况" prop="marriage">
                <el-select
                  v-model="formModel.marriage"
                  placeholder="请选择婚姻状况"
                  class="el_select"
                >
                  <el-option
                    v-for="item in marriageList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 最高学历 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="最高学历" prop="education">
                <el-select
                  v-model="formModel.education"
                  placeholder="请选择最高学历"
                  class="el_select"
                >
                  <el-option
                    v-for="item in educationList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="获得最高学历院校或机构" prop="mechanism">
                <el-input v-model="formModel.name" class="el_select" placeholder="请输入获得最高学历院校/机构"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最高学历层次">
                <el-select
                  v-model="formModel.mechanism"
                  placeholder="请选择最高学历层次"
                  class="el_select"
                >
                  <el-option
                    v-for="item in educationList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 最高学位名称 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="最高学位名称" prop="academic">
                <el-input v-model="formModel.academic" class="el_select" placeholder="请输入最高学位名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="获得最高学位院校或机构" prop="academic2">
                <el-input v-model="formModel.academic2" class="el_select" placeholder="请输入获得最高学位院校或机构"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参加工作年月" prop="workdate">
                <el-date-picker
                  type="date"
                  placeholder="选择参加工作年月"
                  v-model="formModel.workdate"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 进本校年月 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="进本校年月" prop="adddate">
                <el-date-picker
                  type="date"
                  placeholder="选择进本校年月"
                  v-model="formModel.adddate"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="教职工类别" prop="worktype">
                <el-select
                  v-model="formModel.worktype"
                  placeholder="请选择教职工类别"
                  class="el_select"
                >
                  <el-option
                    v-for="item in worksList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否在编" prop="stay">
                <el-select
                  v-model="formModel.stay"
                  placeholder="请选择是否在编"
                  class="el_select"
                >
                  <el-option
                    v-for="item in stayList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 现任岗位类别 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="现任岗位类别" prop="nowpost">
                <el-input v-model="formModel.nowpost" class="el_select" placeholder="请输入现任岗位类别"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业技术职称" prop="technicalTitle">
                <el-select
                  v-model="formModel.technicalTitle"
                  placeholder="请选择专业技术职称"
                  class="el_select"
                >
                  <el-option
                    v-for="item in schoolList"
                    :label="item.name"
                    :value="item.val"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="btns">
            <el-col :span="24"> 
              <el-form-item>
              <el-button type="primary" @click="submitForm('formModel')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('formModel')">重置</el-button>
          </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name:"single",
  data() {
    return {
      cityList: [
        { name: "中国", val: 0 },
        { name: "香港", val: 1 },
      ],
      famousList: [
        { name: "汉族", val: 0 },
        { name: "壮族", val: 1 },
      ],
      politicalList: [
        { name: "共产党员", val: 0 },
        { name: "共青团员", val: 1 },
      ],
      marriageList: [
        { name: "已婚", val: 0 },
        { name: "未婚", val: 1 },
      ],
      educationList: [
        { name: "小学", val: 0 },
        { name: "大学", val: 1 },
      ],
      worksList: [
        { name: "类别1", val: 0 },
        { name: "类别2", val: 1 },
      ],
      stayList: [
        { name: "否", val: 0 },
        { name: "在", val: 1 },
      ],
      schoolList: [
        { name: "xxx学院", val: 0 },
        { name: "xxx学院", val: 1 },
      ],

      imageUrl: '',
      formModel: {
        t_type1:"",
        t_type2:"",
        photo1:"",
        photo2:"",
        username: "",
        sex:"",
        country:"",
        city: 0,
        birthday:"",
        native:"",
        address:"",
        famous:"",
        political:"",
        marriage:"",
        education:"",
        mechanism:"",
        academic:"",
        academic2:"",
        workdate:"",
        adddate:"",
        worktype:"",
        stay:"",
        nowpost:"",
        technicalTitle:"",
      },
      rules: {
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        academic: [
          { required: true, message: "请输入最高学位名称", trigger: "blur" },
        ],
        academic2: [
          { required: true, message: "请输入获得最高学位院校或机构", trigger: "blur" },
        ],
        nowpost: [
          { required: true, message: "请输入现任岗位类别", trigger: "blur" },
        ],
        t_type1: [
          { required: true, message: "请选择教师类别", trigger: "change" },
        ],
        photo1: [
          { required: true, message: "请上传证件照", trigger: "change" },
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        country: [
          { required: true, message: "请选择国籍", trigger: "change" },
        ],
        birthday: [
          {
            type: "date",required: true,message: "请选择日期",trigger: "change", 
          },
        ],
        workdate: [
          {
            type: "date",required: true,message: "请选择参加工作年月",trigger: "change", 
          },
        ],
        adddate: [
          {
            type: "date",required: true,message: "请选择进本校年月",trigger: "change", 
          },
        ],
        native: [
          { required: true, message: "请选择籍贯", trigger: "change" },
        ],
        address: [
          { required: true, message: "请选择出生地", trigger: "change" },
        ],
        famous: [
          { required: true, message: "请选择名族", trigger: "change" },
        ],
        political: [
          { required: true, message: "请选择政治面貌", trigger: "change" },
        ],
        marriage: [
          { required: true, message: "请选择婚姻状况", trigger: "change" },
        ],
        education: [
          { required: true, message: "请选择最高学历", trigger: "change" },
        ],
        mechanism: [
          { required: true, message: "请输入获得最高学历院校", trigger: "change" },
        ],
        worktype: [
          { required: true, message: "请选择教职工类别", trigger: "change" },
        ],
        stay: [
          { required: true, message: "请选择是否在编", trigger: "change" },
        ],
        technicalTitle: [
          { required: true, message: "请选择专业技术职称", trigger: "change" },
        ],

      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleAvatarSuccess(res, file) {
        this.formModel.photo1 = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
};
</script>


<style >
.single {
  padding: 0.5rem;
}
#teacher1 {
  margin-left: 5rem;
}
.el_select {
  width: 15rem;
}
.btns{
  padding-left: 22rem;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

